{extend name="index/base" /}
{block name='title'}My Reviews{/block}
{block name='content'}

<div class="container clearfix my-5 pb-1">
    {include file="user/leftMenu" name="Reviews&Show" route="user/review"/}

    <div class="userBox goods-review-body">
        <div class="userH_tab clearfix">
            <a href="{:url('/user/review')}"  >To Be Evaluated</a>
            <a href="{:url('/user/reviewmine')}" class="on">My Reviews</a>

        </div>
        <div class="review-content">
            <div class="my-review">
                <dl class="review" v-for="(item,index) in list" :key="index">
                    <dt class="clearfix">
                        <div class="name mr10">{{item.user_name}}</div>

                        <div class="star js-rate-star">

                            <i class="review-star rated" v-for="num in item.level" :key="num"></i>
                        </div>
                    </dt>
                    <dd class="time">{{item.create_time}}</dd>
                    <dd class="review-goods-item"> </dd>
                    <dd class="text">{{item.content}}</dd>

                    <dd class="goods clearfix" v-if="item.goods_info.id">
                        <div class="js-reviewPic">
                            <img class="js_loadingimg" :src="item.goods_info.img" :alt="item.goods_info.name" style="display: block;">
                            <div class="info">
                                <h3 class="product-title">
                                    <a href="">{{item.goods_info.name}}</a>
                                </h3>

                                <div class="fs-sm">
                                    <span class="text-muted me-2">{{item.goods_info.sku_name}}</span>
                                </div>
                            </div>
                        </div>
                    </dd>
                     <dd class="photos clearfix" v-if="item.img && item.img.length>0">
                        <p class="js-reviewPic"  v-for="(img,img_index) in item.img" :key="img_index">
                            <img class="js_loadingimg logsss_event_cl" :src="img" style="display: block;" />
                        </p>
                    </dd>

                </dl>

            </div>
            <!-- 	<div class="empty-data">
                    <img src="https://css.zafcdn.com/imagecache/ZF_EN/images/pageimg/user_2019/review-empty.png" alt="empty-img">
                    <p class="empty-tip">Sorry, you haven't made any purchases yet.</p>
                    <a class="go-shopping-btn fsb" href="https://www.zaful.com/">go shopping</a>
                </div> -->

        </div>
        <!-- Pagination-->
        <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
            <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="total"> </el-pagination>
        </nav>
    </div>
</div>

{/block}
{block name='script'}


<script>

    layui.extend({

    }).use([], function () {
        initVue({
            data: {
                listQuery:{
                    activeState: 'commented',
                    limit: 15,
                    page:1,
                },
                list: [],
                total: 0,
                total_page: 0,
            },
            components: {
            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {
                this._initData()
            },
            methods: {
                _initData:function(){
                    const that = this
                    this.$network('comment/selfLists',this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.total = data.total || 0
                        that.total_page = data.total_page || 0
                        that.list = data.list ||[]

                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },

            },
        })


    })

</script>

{/block}